import { memo } from 'react'
import { Button } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import useGetUserInfo from '@/hooks/useGetUserInfo'
import { useDispatch } from 'react-redux'
import { logoutReducer } from '@/store/modules/userReducer'

const UserInfo = memo(() => {
  const dispatch = useDispatch()

  const { username, nickname } = useGetUserInfo()

  return (
    <>
      {(!username && <Link to="/login">登录</Link>) || (
        <>
          <span style={{ color: '#e8e8e8' }}>
            <UserOutlined />
            {nickname || username}
          </span>
          <Button type="link" onClick={() => dispatch(logoutReducer())}>
            退出登录
          </Button>
        </>
      )}
    </>
  )
})

export default UserInfo
